<template>
  <div class="worker-statistics">
    <div class="header">
      <div class="icon">
        <!-- <img src="../assets/worker-icon.svg" alt="worker" /> -->
      </div>
      <div class="title">项目工人数据统计</div>
    </div>

    <div class="statistics-cards">
      <div class="stat-card">
        <div class="stat-label">登记工人总人数</div>
        <div class="stat-value">{{ totalWorkers }}</div>
      </div>
      <div class="stat-card">
        <div class="stat-label">当前在线工人数</div>
        <div class="stat-value">{{ onlineWorkers }}</div>
      </div>
    </div>

    <div class="chart-section">
      <div class="chart-container" ref="circularChart"></div>
    </div>
  </div>
</template>

<script>
import { ref, onMounted } from 'vue'
import * as echarts from 'echarts'

export default {
  name: 'WorkerStatistics',
  setup() {
    const circularChart = ref(null)
    let chartInstance = null
    
    const totalWorkers = ref(4256)
    const onlineWorkers = ref(4256)

    const constructionUnits = [
      { name: '建设单位1', value: 12115 },
      { name: '建设单位2', value: 5211 },
      { name: '建设单位3', value: 3255 }
    ]

    const initChart = () => {
      if (chartInstance) {
        chartInstance.dispose()
      }

      chartInstance = echarts.init(circularChart.value)
      const option = {
        tooltip: {
          trigger: 'item',
          formatter: '{b}: {c}'
        },
        color: ['#4FCCFF', '#FFB340', '#36D8D0'],
        series: [
          {
            type: 'pie',
            radius: ['60%', '85%'],
            avoidLabelOverlap: false,
            label: {
              show: true,
              position: 'left',
              formatter: '{b}\n{c}',
              color: '#fff',
              fontSize: 14
            },
            emphasis: {
              label: {
                show: true,
                fontSize: 16,
                fontWeight: 'bold'
              }
            },
            labelLine: {
              show: true,
              length: 15,
              length2: 10,
              lineStyle: {
                color: '#ffffff'
              }
            },
            data: constructionUnits,
            itemStyle: {
              borderRadius: 10,
              borderColor: '#0A1931',
              borderWidth: 2
            }
          }
        ]
      }
      
      chartInstance.setOption(option)
    }

    onMounted(() => {
      initChart()
      
      window.addEventListener('resize', () => {
        chartInstance?.resize()
      })
    })

    return {
      circularChart,
      totalWorkers,
      onlineWorkers
    }
  }
}
</script>

<style scoped>
.worker-statistics {
  background: rgba(10, 25, 49, 0.8);
  border-radius: 8px;
  padding: 20px;
  color: white;
}

.header {
  display: flex;
  align-items: center;
  margin-bottom: 24px;
}

.icon {
  width: 32px;
  height: 32px;
  margin-right: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.title {
  font-size: 20px;
  font-weight: 500;
}

.statistics-cards {
  display: flex;
  gap: 20px;
  margin-bottom: 24px;
}

.stat-card {
  flex: 1;
  background: rgba(16, 36, 69, 0.6);
  border-radius: 6px;
  padding: 16px;
}

.stat-label {
  font-size: 14px;
  color: #8F959E;
  margin-bottom: 8px;
}

.stat-value {
  font-size: 24px;
  font-weight: 600;
  color: #4FCCFF;
}

.chart-section {
  margin-top: 20px;
}

.chart-container {
  height: 300px;
  width: 100%;
}
</style> 